.flex{
  display: flex;
}

.m0{
  margin:0;
}

.m10{
  margin: 10px;
}

.full{
  width: 100%;
  height: 100%;
}


.hide{
  display: none;
}

.title{
  position: absolute;
  top:0;
  left:45vw;
  padding: 0 10px;
  background: -webkit-linear-gradient(#fff, #666);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.card{
  background-color: rgba(20,50,200,0.6);
  color: white;
}

.card-header{
  background-color: rgba(20,50,200,0.7);
}

.btn-link {
  color: white;
  font-size: x-large;
}

.info-bar{
  display: flex;
  padding: 10px;
}

.icon{
  width:32px;
  height:32px;
  cursor: pointer;
}

.icon:hover{
  background-color:rgba(20,50,200,0.4);
}

.icon-list{
  justify-content: space-around;
  width: 100%;
}

.icon-description{
  margin:10px;
  color:#EEE;
}

p{
  margin: 0;
  padding: 0 5px;
  font-size:24px;
  font-weight: 600;
}

.pointer{
  cursor: pointer;
}

.cursor-default{
  cursor: default;
}

.icon-3d{
  cursor: pointer;
  background-color: rgba(20,50,200,0.2);
  margin: 0 2px;
  width: 32px;
  height: 32px;
}

.right-info{
  position: absolute;
  top:70px;
  right:10px;
  width:380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* height: 95vh; */
}


.twinkle {
  animation-name: twinkle-key;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes twinkle-key{
  50%  {
    opacity: 0.5;
  }
}

#popover-content{
  position: absolute;
  pointer-events:none;
  background-color: rgba(20,50,200,0.6);
  border-radius: 20px;
}

#popover-text{
  color: white;
  text-align: center;
  border-bottom: 1px solid;
}

.parameter{
  display: flex;
  justify-content: space-between;
}

.parameter .name{
  font-weight: 600;
  color: #007bff;
}